<template>
	<div class="content">
		<div class="clear">
			<Form inline class="fl">
				<Input type="text" placeholder="订单单号" class="w200 m-r10" v-model.trim="orderNum" />
				<Input type="text" placeholder="明细单号" class="w200 m-r10" v-model.trim="detailNum" />
				<Input type="text" placeholder="手机号码" class="w200 m-r10" v-model.trim="userName" />
				<Select placeholder="请选择类型" class="w200 m-r10" v-model="state">
					<Option value="-1">全部</Option>
					<Option value="0">买入</Option>
					<Option value="1">卖出</Option>
				</Select>
				<Select placeholder="请选择状态" class="w200 m-r10" v-model="state2">
					<Option value="4">申诉中</Option>
					<Option value="6">已仲裁</Option>
				</Select>
				<DatePicker type="daterange" split-panels placeholder="请选择时间段" class="w200 m-r10" format="yyyy-MM-dd" @on-change="getTime">
				</DatePicker>
				<Button type="primary" v-on:click="ifGetQuery">查询</Button>
			</Form>
		</div>
		<Button class="daochu" type="primary" size="large" @click="exportData" :loading="dcShow">
            <Icon type="ios-download-outline"></Icon> 导出</Button>
		<Table stripe :columns="columns" ref="table" :data='list' :loading="loading"></Table>
		<Page :total="info" show-elevator :page-size="pageSize" show-total @on-change="cuctGetQuery" :current.sync="page"></Page>
		<Modal v-model="modal1" title="申诉流程" width='70%'>
			<Table height="400" stripe :columns="columns2" :data="contributions" ref="table2" :loading="loading2"></Table>
			<div align="center" style="margin-top: 20px;position: relative;color: #ed4014;font-size: 16px;" v-if="contributions.length == 2">
				<span style="position: relative;top: 3px;">*</span>&nbsp;<span>当前买卖双方都提交了申诉，请认真核对</span>
			</div>
			<div slot="footer">
				<Button type="text" size="large" @click="modal1 = false;">取消</Button>
				<Button type="primary" size="large" @click="Review(0)" v-if="contributions[0].processingResults == 0">发币</Button>
				<Button type="primary" size="large" @click="Review(1)" v-if="contributions[0].processingResults == 0">关闭订单</Button>
			</div>
		</Modal>
		<Modal v-model="modal2" :title="type == 0 ? '发币' : '关闭订单'" width='40%'>
			<p v-text="type == 0 ? '点击发币买方将会收到货币，此操作一经确认无法撤销。' : '点击关闭订单卖方货币奖原路放回，买方无法收到货币，此操作一经确认无法撤销。'" style="margin-top: 10px;margin-bottom: 15px"></p>
			<Input type="textarea" placeholder="请填写仲裁备注信息，该信息将展示给用户。" v-model.tirm="reviewValue" />
			<p style="color: #ed4014;margin-top: 10px;">*备注信息必填</p>
			<div slot="footer">
				<Button type="text" size="large" @click="modal2 = false;">取消</Button>
				<Button type="primary" size="large" @click="reviewSubmit">确定</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dcShow: false,
				loading: true,
				loading2: true,
				jsonData: [],
				list: [], // 分享收益列表数据
				contributions: [{
					processingResults: '',
				}],
				modal1: false,
				modal2: false,
				info: null, // 总条数
				page: 1, // 页数
				pageSize: 20, // 每页多少条
				current: 1,
				downList: [],
				dataValue: ['', ''], // 时间段值
				uuid: '', // 用户 ID
				orderNum: '',
				userName: '',
				detailNum: '',
				reviewValue: '',
				reviewId: '',
				state: '-1',
				state2: '4',
				type: '',
				reviewButtonText: '审核',
				columns: [{
						title: '订单单号',
						align: 'center',
						key: 'orderNum',
						render: (h, params) => {
							return h('div', params.row.orderNum == null ? '#' : params.row.orderNum)
						}
					}, {
						title: '明细单号',
						align: 'center',
						key: 'detailNum',
						render: (h, params) => {
							return h('div', params.row.detailNum == null ? '#' : params.row.detailNum)
						}
					},
					{
						title: '手机号码',
						align: 'center',
						key: 'userName',
						render: (h, params) => {
							return h('div', params.row.userName == null ? '#' : params.row.userName)
						}
					},
					{
						title: '交易类型',
						align: 'center',
						key: 'typeId',
						render: (h, params) => {
							return h('div', params.row.typeId == null ? '#' : params.row.typeId == 0 ? '买入' : params.row.typeId == 1 ? '卖出' : '#')
						}
					},
					{
						title: '订单状态',
						align: 'center',
						key: 'status',
						render: (h, params) => {
							return h('div', params.row.status == null ? '#' : params.row.status == 1 ? '取消' : params.row.status == 2 ? '待付款' : params.row.status == 3 ? '已付款' : params.row.status == 4 ? '申诉中' : params.row.status == 5 ? '确认已收款' : params.row.status == 6 ? '已仲裁' : '#');
						}
					},
					{
						title: '交易数量',
						align: 'center',
						key: 'numberDeals',
						render: (h, params) => {
							return h('div', params.row.numberDeals == null ? '#' : this.Fixed(params.row.numberDeals))
						}
					},
					{
						title: '付款方式',
						align: 'center',
						key: 'payChain',
						render: (h, params) => {
							return h('div', params.row.payChain == null ? '未付款' : params.row.payChain == 0 ? '银行卡支付' : params.row.payChain == 1 ? '微信支付' : params.row.payChain == 2 ? '支付宝支付' : '#')
						}
					},
					{
						title: '申诉日期',
						align: 'center',
						key: 'createTime',
						sortable: true,
						render: (h, params) => {
							return h('div', params.row.createTime == null ? '#' : this.stringToTime(params.row.createTime))
						}
					},
					{
						title: "操作",
						key: "action",
						width: 200,
						align: "center",
						render: (h, params) => {
							return h("div", [
								h(
									"Button", {
										props: {
											type: "primary",
											size: "small"
										},
										style: {
											marginRight: "5px"
										},
										on: {
											click: () => {
												this.modal1 = true;
												this.axios.post('/admin/otc/getOtcAppeal', this.qs.stringify({
													detailId: params.row.id
												})).then(res => {
													if(res.data.code == 200) {
														this.contributions = res.data.data;
														this.reviewId = params.row.id;
														this.loading2 = false;
													}
												})
											}
										}
									},
									this.reviewButtonText
								),
							]);
						}
					}
				],
				columns2: [{
					title: '申诉方',
					key: 'createMemberId',
					align: 'center',
					render: (h, params) => {
						return h('div', params.row.createMemberId == null ? '#' : params.row.createMemberId == params.row.memberId ? '用户' : '商户')
					}
				}, {
					title: '商户名',
					key: 'otcUserName',
					align: 'center',
					render: (h, params) => {
						return h('div', params.row.otcUserName == null ? '#' : params.row.otcUserName)
					}
				}, {
					title: '用户名',
					key: 'userName',
					align: 'center',
					render: (h, params) => {
						return h('div', params.row.userName == null ? '#' : params.row.userName)
					}
				}, {
					title: '凭证',
					key: 'credentials',
					width: '300',
					align: 'center',
					render: (h, params) => {
						return h('div', [
							h('img', {
								attrs: {
									src: params.row.credentials == null ? '' : params.row.credentials.split(',')[0],
									preview: '1'
								},
								style: {
									width: '70px',
									height: '70px',
									margin: '10px 10px'
								}
							}),
							h('img', {
								attrs: {
									src: params.row.credentials == null ? '' : params.row.credentials.split(',')[1],
									preview: '1'
								},
								style: {
									width: '70px',
									height: '70px',
									margin: '10px 0px',
									display: params.row.credentials == null ? 'none' : params.row.credentials.split(',')[1] == '' ? 'none' : ''
								}
							}),
							h('img', {
								attrs: {
									src: params.row.credentials == null ? '' : params.row.credentials.split(',')[2],
									preview: '1'
								},
								style: {
									width: '70px',
									height: '70px',
									margin: '10px 10px',
									display: params.row.credentials == null ? 'none' : params.row.credentials.split(',')[2] == '' ? 'none' : ''
								}
							}),
						])
					}
				}, {
					title: '申诉备注',
					key: 'appealRemark',
					align: 'center',
					render: (h, params) => {
						return h('div', params.row.appealRemark == null ? '#' : params.row.appealRemark)
					}
				}, {
					title: '处理结果备注',
					key: 'resultsRemark',
					align: 'center',
					render: (h, params) => {
						return h('div', params.row.resultsRemark == null ? '#' : params.row.resultsRemark)
					}
				}, {
					title: '处理结果',
					key: 'processingResults',
					align: 'center',
					render: (h, params) => {
						return h('div', params.row.processingResults == null ? '#' : params.row.processingResults == 0 ? '未处理' : '已处理');
					}
				}],
			}
		},
		created() {

		},
		mounted() {
			this.$Message.config({
				top: 250
			})
			if(localStorage.orderNum) {
				this.orderNum = localStorage.orderNum;
				localStorage.removeItem('orderNum');
			}
			this.getQuery() // 查询直推奖励
		},
		methods: {
			exportData() {
				this.jsonData = [];
				this.dcShow = true;
				this.axios.post('/admin/otc/getOtcDetail', this.qs.stringify({
					current: this.page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					orderNum: this.orderNum ? this.orderNum : '',
					detailNum: this.detailNum,
					userName: this.userName,
					otcName: '',
					type: this.state == '-1' ? '' : this.state,
					status: this.state2 == '-1' ? '' : this.state2,
					startTime: this.dataValue[0] == "" ? "" : this.dataValue[0] + ' 00:00:00',
					endTime: this.dataValue[1] == "" ? "" : this.dataValue[1] + ' 23:59:59'
				})).then(res => {
					if(res.data.code == 200) {
						this.axios.post('/admin/otc/getOtcDetail', this.qs.stringify({
							current: 1, // 当前页【可选，默认1】
							size: res.data.data.total, // 每页记录数【可选，默认20】
							orderNum: this.orderNum ? this.orderNum : '',
							detailNum: this.detailNum,
							userName: this.userName,
							otcName: '',
							type: this.state == '-1' ? '' : this.state,
							status: this.state2 == '-1' ? '' : this.state2,
							startTime: this.dataValue[0] == "" ? "" : this.dataValue[0] + ' 00:00:00',
							endTime: this.dataValue[1] == "" ? "" : this.dataValue[1] + ' 23:59:59'
						})).then(res => {
							if(res.data.code == 200) {
								this.downList = res.data.data.records;
								this.downList.forEach((row, index) => {
									this.downList[index].orderNum = '\t' + this.downList[index].orderNum == null ? '#' : this.downList[index].orderNum;
									this.downList[index].detailNum = '\t' + this.downList[index].detailNum == null ? '#' : this.downList[index].detailNum;
									this.downList[index].userName = '\t' + this.downList[index].userName == null ? '#' : this.downList[index].userName;
									this.downList[index].typeId = '\t' + this.downList[index].typeId == null ? '#' : this.downList[index].typeId == 0 ? '买入' : this.downList[index].typeId == 1 ? '卖出' : '#';
									this.downList[index].status = '\t' + this.downList[index].status == null ? '#' : this.downList[index].status == 1 ? '取消' : this.downList[index].status == 2 ? '待付款' : this.downList[index].status == 3 ? '已付款' : this.downList[index].status == 4 ? '申诉中' : this.downList[index].status == 5 ? '确认已收款' : this.downList[index].status == 6 ? '已仲裁' : '#';
									this.downList[index].numberDeals = '\t' + this.downList[index].numberDeals == null ? '#' : this.Fixed(this.downList[index].numberDeals);
									this.downList[index].payChain = '\t' + this.downList[index].payChain == null ? '未付款' : this.downList[index].payChain == 0 ? '银行卡支付' : this.downList[index].payChain == 1 ? '微信支付' : this.downList[index].payChain == 2 ? '支付宝支付' : '#';
									this.downList[index].createTime = '\t' + this.stringToTime(this.downList[index].createTime);
									this.jsonData.push({
										orderNum: this.downList[index].orderNum,
										detailNum: this.downList[index].detailNum,
										userName: this.downList[index].userName,
										typeId: this.downList[index].typeId,
										status: this.downList[index].status,
										numberDeals: this.downList[index].numberDeals,
										payChain: this.downList[index].payChain,
										createTime: this.downList[index].createTime,
									})
								})
								let str = `订单单号,明细单号,手机号码,交易类型,订单状态,交易数量,付款方式	,发布日期\n`;
								this.downLoad(this.jsonData, str, '仲裁管理');
							}
						})
					}
				})
			},
			// 处理时间段时间格式
			getTime(daterange) {
				this.dataValue = daterange
			},
			getQuery() {
				this.loading = true;
				this.axios.post('/admin/otc/getOtcDetail', this.qs.stringify({
					current: this.page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					orderNum: this.orderNum ? this.orderNum : '',
					detailNum: this.detailNum,
					userName: this.userName,
					otcName: '',
					type: this.state == '-1' ? '' : this.state,
					status: this.state2 == '-1' ? '' : this.state2,
					startTime: this.dataValue[0] == "" ? "" : this.dataValue[0] + ' 00:00:00',
					endTime: this.dataValue[1] == "" ? "" : this.dataValue[1] + ' 23:59:59'
				})).then(res => {
					if(res.data.code == 200) {
						this.list = res.data.data.records;
						this.info = res.data.data.total;
						this.loading = false;
					}
				})
			},
			cuctGetQuery(page) { // 分页查询直推奖励
				this.loading = true;
				this.axios.post('/admin/otc/getOtcDetail', this.qs.stringify({
					current: page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					orderNum: this.orderNum ? this.orderNum : '',
					detailNum: this.detailNum,
					userName: this.userName,
					otcName: '',
					type: this.state == '-1' ? '' : this.state,
					status: this.state2 == '-1' ? '' : this.state2,
					startTime: this.dataValue[0] == "" ? "" : this.dataValue[0] + ' 00:00:00',
					endTime: this.dataValue[1] == "" ? "" : this.dataValue[1] + ' 23:59:59'
				})).then(res => {
					if(res.data.code == 200) {
						this.list = res.data.data.records;
						this.info = res.data.data.total;
						this.loading = false;
					}
				})
			},
			ifGetQuery() { // 条件查询直推奖励
				this.page = 1;
				this.loading = true;
				this.axios.post('/admin/otc/getOtcDetail', this.qs.stringify({
					current: this.page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					orderNum: this.orderNum ? this.orderNum : '',
					detailNum: this.detailNum,
					userName: this.userName,
					otcName: '',
					type: this.state == '-1' ? '' : this.state,
					status: this.state2 == '-1' ? '' : this.state2,
					startTime: this.dataValue[0] == "" ? "" : this.dataValue[0] + ' 00:00:00',
					endTime: this.dataValue[1] == "" ? "" : this.dataValue[1] + ' 23:59:59'
				})).then(res => {
					if(res.data.code == 200) {
						this.list = res.data.data.records;
						this.info = res.data.data.total;
						this.loading = false;
						this.state2 == 4 ? this.reviewButtonText = '审核' : this.reviewButtonText = '查看';
					}
				})
			},
			Review(type) {
				this.modal2 = true;
				this.type = type;
			},
			reviewSubmit() {
				if(this.reviewValue == '') {
					return false;
				}
				this.axios.post('/admin/otc/updateOtcDetail', this.qs.stringify({
					detailId: this.reviewId,
					description: this.reviewValue,
					type: this.type
				})).then(res => {
					if(res.data.code == 200) {
						this.modal2 = false;
						this.modal1 = false;
						this.reviewValue = '';
						this.getQuery();
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.ivu-modal-confirm-footer {
		display: none !important;
	}
</style>